<template>
    <lib-doc :libDocData="libDocData"></lib-doc>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from 'vue'
import LibDoc from '@/components/LibDoc.vue'
import { LibDocInterface } from '@/service/LibDocService'
export default defineComponent({
    name: 'i_search_demo',
    setup () {
        const libDocData: LibDocInterface = {
            title: '搜索条件',
            docList: [
                {
                    label: '引入组件',
                    value: "import { ISearch } from 'wd-platform-library'"
                },
                {
                    label: '创建搜索条件对象',
                    type: 'pre',
                    value: `
const searchOptions:SearchInterFace<ResourceSearchParams> = reactive({
        form: {
            name: '',
            url: '',
            city: null
        },
        fieldDataList: [
            {
                labelWidth: 70,
                type: 'input', // form表单类型
                label: '姓名', // 字段描述信息
                field: 'name' // form 对应字段
            },
            {
                labelWidth: 70,
                type: 'input', // form表单类型
                label: '地址', // 字段描述信息
                field: 'url' // form 对应字段
            },
            {
                labelWidth: 70,
                type: 'select', // form表单类型
                label: '状态', // 字段描述信息
                field: 'city', // form 对应字段
                dataList: [
                    {
                        label: '北京',
                        value: 'bj'
                    },
                    {
                        label: '河南',
                        value: 'hn'
                    },
                    {
                        label: '河北',
                        value: 'hb'
                    }
                ]
            }
        ]
    })`
                },
                {
                    label: 'form对象说明',
                    type: 'pre',
                    value: `
    //存放获取v-model值的对象,和fieldDataList内field对应
    form: {
        name: '',
        url: '',
        city: null
    },`
                },
                {
                    label: 'fieldDataList配置',
                    type: 'pre',
                    value: `
    //type类型:
        //input  输入框
        //inputNumber 数字输入框
        //textarea   多行文本框
        //checkbox   复选框
        //radio      单选框
        //select     下拉菜单
        //rangePicker 时间选择器
        //datePicker  时间选择器
        //cascader    多级下拉菜单
        //treeSelect  树形下拉菜单
        //checkBoxSelect 下拉复选框
    {
        labelWidth: 70, // 提示文本宽度
        type: 'input', // form表单类型
        label: '姓名', // 提示文本
        field: 'name', // form 对应字段
        dataList?:[], // type为下拉框,复选框,单选框,多级下拉菜单,树形下拉框,下拉复选框时配置该字段
        callback: (data: any) => { //选择后执行方法
            alert(data)
        },
    },`
                },
                {
                    label: '公共回调方法',
                    type: 'pre',
                    value: `
const searchSubmitFun = () => {};//点击搜索回调方法
const resetSubmitFun = () => {}; //点击重置回调方法
`
                }
            ]
        }
        return {
            libDocData
        }
    },
    methods: {},
    components: { LibDoc }
})
</script>
